<!-- 底部导航栏界面 -->
<template>
  <div class="nav-footer" v-if="showNavigation">
    <router-link to="/about-page" class="nav-item" active-class="active">
      <img :src="isCurrentRoute('/about-page') ?  require('@/assets/0-1-1.png') :  require('@/assets/0-1.png')" alt="" class="ages">
      <span>寄快递</span>
    </router-link>
    <router-link to="/home-page" class="nav-item" active-class="active">
      <img :src="isCurrentRoute('/home-page') ?  require('@/assets/0-2-2.png') :  require('@/assets/0-2.png')" alt="" class="ages">
      <span>查快递</span>
    </router-link>
    <router-link to="/vip-page" class="nav-item" active-class="active">
      <img :src="isCurrentRoute('/vip-page') ? require('@/assets/0-3-3.png'):  require('@/assets/0-3.png')" alt="" class="ages">
      <span>会员福利</span>
    </router-link>
    <router-link to="/life-page" class="nav-item" active-class="active">
      <img :src="isCurrentRoute('/life-page') ?  require('@/assets/0-4-4.png') :  require('@/assets/0-4.png')" alt="" class="ages">
      <span>生活服务</span>
    </router-link>
    <router-link to="/my-page" class="nav-item" active-class="active">
      <img :src="isCurrentRoute('/my-page') ?  require('@/assets/0-5-5.png') :  require('@/assets/0-5.png')" alt="" class="ages">
      <span>我的</span>
    </router-link>
  </div>
  <router-view/>
</template>

<script>
export default {
  name: 'NavFooter',
  computed: {
    showNavigation() {
      // 在登录页和手机验证页等不显示导航栏
      const hideNavigationRoutes = ['/login-page', '/phone-verify','/user-agreement','/privacy-policy','/express-delivery','/send-courier'];
      return !hideNavigationRoutes.includes(this.$route.path);
    }
  },
  methods: {
    isCurrentRoute(route) {
      return this.$route.path === route;
    }
  }
}
</script>

<style scoped>
.nav-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  z-index: 999;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7d7d7d;
  text-decoration: none;
  font-size: 30px;
  width: 20%;
  text-align: center;
}

.nav-item span {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  color: black;
}

.ages {
  width: 23px;
  height: 22px;
}

/* 激活状态样式 */
.active span {
  color: red;
}

.router-link-active {
  color: #000;
  font-weight: bold;
}

.add-icon .icon {
  width: 66px;
  height: 66px;
  color: #fff;
}
</style>